<template>
  <div>
    <!-- 面包屑   -->
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>产值利润柱状图</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <h2>产值利润柱状图<i class="el-icon-data-analysis"></i></h2>
    <el-divider></el-divider>
    <div id="purchase"></div>
<!--    <el-row :gutter="20">-->
<!--      <el-col span="12"><div id="purchase"></div></el-col>-->
<!--      <el-col span="12"><div id="consume"></div></el-col>-->
<!--    </el-row>-->


  </div>
</template>

<script>
import * as echarts from 'echarts';
import request from "@/utils/request";

export default {
  name: "DistributionChart",
  data() {
    return {
      barData:[]
    }
  },
  created() {

  },
  mounted() {
    request.get('bar').then(res=>{
      this.barData=res.data
      var chartDom = document.getElementById('purchase');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '今年产值利润',
          subtext: 'Profit this year'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Rainfall']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Profit ',
            type: 'bar',
            data: this.barData,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
        ]
      };


      option && myChart.setOption(option);
    })


  },
  methods: {}
}
</script>

<style scoped>
#purchase{
  width: 100%;
  height: 500px;
}
#consume{
  width: 100%;
  height: 400px;
}
</style>